<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="applyHeight">
      <div class="cornerComment-in-title">
        <span>例行工作详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody" v-if="editForm">
        <div class="task-body">
          <div class="task-box task-info">
            <p class="task-box-title">工作详情</p>
            <div class="task-box-detail task-info-detail">
              <el-row>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">工作名称：</span>
                    <span>{{ editForm.name }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">发布人：</span>
                    <span>{{ editForm.admin ? editForm.admin.realname : '--' }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">创建时间：</span>
                    <span>{{ editForm.create_time }}</span>
                  </div>
                </el-col>
                <!--                <el-col :span="12">-->
                <!--                  <div class="task-line-list">-->
                <!--                    <span class="task-detail-title">任务状态：</span>-->
                <!--                    <span class="task-status mr-10">{{ taskStatusText }}</span>-->
                <!--                    &lt;!&ndash;                    未处理的执行人进行接受，转派； 未处理 执行中 已转派 待审核 驳回 完成 &ndash;&gt;-->
                <!--                  </div>-->
                <!--                </el-col>-->
                <el-col :span="24">
                  <div class="task-line-list">
                    <span class="task-detail-title">工作说明：</span>
                    <div v-html="editForm.remark" class="contentTitle"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="task-box task-file">
            <p class="task-box-title">附件文件</p>
            <div class="task-file-detail task-box-detail">
              <el-row v-if="editForm.file && editForm.file.length">
                <el-col :span="12" v-for="(item,index) in editForm.file" :key="index">
                  <div class="task-line-list">
                    <span>附件{{ index + 1 }}：</span>
                    <span class="file-link">
                      <btn_file :option="item"></btn_file>
                    </span>
                  </div>
                </el-col>
              </el-row>
              <el-row v-else>
                <el-col :span="24">
                  <div class="task_file_list">
                    未找到相关文件
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="task-box task-user" style="overflow: hidden;">
            <div class="task-box-list-box">
              <p class="task-box-title">{{ acticveWorke == '2' || acticveWorke == '3' ? '例行工作执行成员' : '我的工作记录' }}</p>
              <el-button class="ml-10" size="small" plain @click="noteVisible=true" v-if="acticveWorke=='1'">添加工作记录
              </el-button>
            </div>
            <tips optionTemplate="interacDetailUsers"></tips>
            <div class="task-user-detail" v-if="acticveWorke=='2' || acticveWorke=='3'">
              <!--              acticveWorke 我的例行工作 1 只看我的信息;我的发布 2 看全员数据信息;-->
              <el-table
                :data="editForm.user"
                border
                style="width: 100%">
                <el-table-column
                  label="执行人"
                  align="center">
                  <template slot-scope="scope">
                    {{ scope.row.realname ? scope.row.realname : '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="is_end"
                  label="执行状态"
                  align="center">
                  <template slot-scope="scope">
                    <span :style="{color: scope.row.is_end?'#67C23A':'#ef6f14'}">{{
                        scope.row.is_end ? '已提交' : '未提交'
                      }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="userListData=scope.row,commonVisible=true">
                      查看提交记录
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="task-user-detail" v-if="acticveWorke=='1'">
              <!--              acticveWorke 我的例行工作 1 只看我的信息;我的发布 2 看全员数据信息;-->
              <el-table
                :data="fileList"
                border
                style="width: 100%">
                <el-table-column
                  prop="create_time"
                  label="创建时间"
                  align="center">
                </el-table-column>
                <el-table-column
                  label="提交人"
                  align="center">
                  <template slot-scope="scope">
                    {{ scope.row.user ? scope.row.user.realname : '未提交' }}
                  </template>
                </el-table-column>
                <el-table-column
                  label="文件"
                  align="center">
                  <template slot-scope="scope">
                    <div v-for="item in scope.row.file">
                      <btn_file :option="item"></btn_file>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="noteData=scope.row,noteVisible=true">
                      编辑
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-col :span="24" class="toolbar">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="page.total"
                  :page-size="page.pagesize"
                  @current-change="handleSizeChange">
                </el-pagination>
              </el-col>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">返回</el-button>
      </div>
    </div>
    <!--    isPreview 是否只是预览 true false -->
    <fileList :visible.sync="commonVisible" :workId="workId" @InitFn="InitFn" :userListData="userListData"></fileList>
    <addFileNote :visible.sync="noteVisible" :workId="workId" :workeType="workeType" :noteData="noteData"
                 @InitFn="getFileListFn"></addFileNote>
  </div>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex';
import {fileIndex} from '@/api/admin/file_directory.js'
import {routineDetail, noteList} from "@/api/admin/outineWorke"
import {pagination} from '@/utils/util.js'
import fileList from "./fileList";
import addFileNote from "./addFileNote"; // 添加日志

export default {
  props: ['visible', 'workId', 'acticveWorke'], // activeName    我的例行工作 1 我的发布 2
  components: {
    fileList,
    addFileNote
  },
  data() {
    return {
      noteVisible: false,
      isPreview: false,
      commonVisible: false,
      dialogVisible: false,
      noteReplyVisible: false,
      uservisible: false,
      treeList: [],
      userListData: null,
      noteData: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      fileId: '',
      filterText: '',
      checkFileOption: {},
      heightBox: 0,
      editForm: null,
      taskStatusText: '',
      dynamicTagsArray: {},
      teskCommon: {
        commonvisible: false,
        commonType: '',
        taskUserId: '',
      },
      workeType: '',
      canCheckBtn: false, // 接受按键 转派按键 日志的执行人才可操作
      fileSrc: '', // 档案目录
      is_read: false, // 是否是审阅人
      commonOption: null,
      fileList: [],
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.InitFn()
        // 只展示我的历史记录
        if (this.acticveWorke == '1') {
          this.getFileListFn()
        }
      } else {
        this.clearPageData()
      }
    }
  },
  created() {
  },
  methods: {
    clearPageData() {
      this.editForm = null
      this.canCheckBtn = false
    },
    // 详情数据
    InitFn() {
      routineDetail({id: this.workId}).then(res => {
        if (res.vo.file) {
          if (res.vo.file !== '[]') {
            if (res.vo.file.indexOf('{') !== -1) {
              let list_ = res.vo.file ? JSON.parse(res.vo.file) : []
              for (let item of list_) {
                item.popover = false
              }
              res.vo.file = list_
            } else {
              res.vo.file = [{name: '附件1', src: res.vo.file, popover: false}]
            }
          } else {
            res.vo.file = []
          }
        }
        // 需要判断是执行者还是，发布者
        // acticveWorke 1 我的工作 2 我的发布/总数据预览
        this.editForm = res.vo
      })
    },
    // 获取记录
    getFileListFn() {
      noteList({p: 1, cate_id: this.workId, user_id: this.userInfo.id}).then(res => {
        for (let item of res.list.data) {
          item.file = JSON.parse(item.file)
        }
        this.fileList = res.list.data
        this.page.total = res.list.total
        console.log(res)
      })
    },
    getFileSrc() {
      fileIndex({}).then(data => {
        let a = {}
        for (let item of data.list) {
          a[item.id] = item
        }
        this.getFileName(a, this.editForm.path_id, [])
      })
    },
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    getFileName(data, id, name) {
      if (data[id]) {
        name.push(data[id].name)
        if (data[id].parent_id) {
          this.getFileName(data, data[id].parent_id, name)
        } else {
          let src = name.reverse();
          this.fileSrc = src.join('/')
        }
      }
    },
    // 接受任务 需要判断是普通任务 档案任务 公文任务
    taskTakeFn() {
      let _self = this
      this.$confirm('确定接受任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        taskAccept({type: this.tabValue, data: {id: this.taskId}}).then(data => {
          if (!data.code) {
            _self.$message.success('接受成功!')
            _self.InitFn()
          } else {
            _self.$message.error(data.msg)
          }
        })
      }).catch(() => {
        console.log('取消')
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    taskChangeTakeFn(option) {
      this.uservisible = true
    },
    getUser(option) {
      if (option !== 'comment') {
        this.$confirm('你确认将任务转派给：' + option.realname + '？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 请求转派接口 ,转派人员id userId
          taskReply({type: this.tabValue, data: {user_id: option.id, id: this.taskId}}).then(data => {
            if (data.code === 0) {
              this.InitFn()
              this.$emit('InitFn')
              this.$message.success('转派成功!')
              this.uservisible = false
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {
        })
      } else {
        this.InitFn()
        this.$emit('InitFn')
      }
    },
    openCommonDialog(option) {
      this.teskCommon.commonType = option
      this.teskCommon.commonvisible = true
    },
    showNoteFn(id) {
      this.noteId = id
      this.noteReplyVisible = true
    },
    getReview(id) {
      this.$confirm('确认审阅内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 0 通过 1 驳回
        taskExamine({type: this.tabValue, data: {id: id, type: 0}}).then(data => {
          console.log('data:', data)
          if (data.code) {
            this.$message.error(data.msg)
          } else {
            this.$message.success(data.msg)
            this.InitFn()
          }
        })
      }).catch(() => {
      });
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
.contentTitle {
  flex: 1;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  background: #eee;
}

.close-Btn-line {
  cursor: pointer;
}

.jobTime span {
  padding: 0 10px;
}

.task-box {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 20px;
}

.task-box-title {
  border-left: 3px solid #009bfb;
  padding-left: 10px;
  height: 15px;
  line-height: 15px;
}

.task-line-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.task-detail-title {
  display: block;
  width: 75px;
}

.task-box-detail {
  margin-top: 20px;
}

.file-link {
  color: #1b8de5;
  cursor: pointer;
}

.file-link:hover {
  text-decoration: underline;
}

.task-status {
  color: red;
}

.task_file_list {
  text-align: center;
  color: #999;
}

.task-box-list-box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.task-box-title {
  flex: 1;
}
</style>
